<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
    <head><title>Inline Box</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
        <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
        <link rel="stylesheet" href="print.css"  media="print"  type="text/css" />
        <!--[if lte IE 6]>
        <link rel="stylesheet" href="ie6.css"    media="all"    type="text/css" />
        <![endif]-->
    </head>

    <body>

        <h1>Inline Box</h1>

        <div class="container"  >
            <span>Notice how if I increase the <code>border-top</code> of the box below, the <code>line-height</code> does not change, but rather the
                block simply overlap the line. Ditto for <code>border-bottom</code> and <code>padding</code>. You know what? I just realized that
                a line (<code>line-height</code>) is really only effective until the next line-break.</span>
            <br />
            <span class="line_height_100">This span has height of 100px</span>
            <br />
            <span class="line_height_normal">This span has no height specified</span>
            <br />
            <span class="line_height_normal">Another normal line-height</span>
            <br />
            <span class="line_height_200">A line-height of 200px</span>
            <br />
            <span class="line_height_normal">Another normal line-height</span>
            <br />
            <span class="default" >BEFORE</span>  

            <!-- the following box needs some sort of text immediately to the left of the padding to make the calculation of the 
                 padding size.
            -->
            <div class="box"     >&larr; Left &nbsp; &uarr; Top &nbsp; Bottom &darr; &nbsp; Right &rarr; </div>

            <span class="default" >AFTER</span>  
            <br />
            <span class="line_height_normal">I see things rather clearly now! You can truly only learn by trying/practising. There does not seem to be
                a shortcut to knowledge.</span>
            <br />
        </div>
    </body>
</html>
